<template>
  <div class="sort">
    <header
      :style="{
        backgroundImage: `url(${
          shopinfo.info && shopinfo.info.poi_back_pic_url
        })`,
      }"
    >
      <div>
        <van-nav-bar
          class="back"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <div class="shop-head">
        <div class="msg">
          <img
            class="logo"
            :src="shopinfo.info && shopinfo.info.picUrl"
            alt=""
          />
          <span class="name1">{{ shopinfo.info && shopinfo.info.name }}</span>
        </div>
        <van-icon
          name="like"
          @click="like"
          :style="{ color: activeColor ? 'red' : '' }"
        />
      </div>
      <section class="menu">
        <span
          ><van-search
            shape="round"
            v-model="value"
            background="none"
            placeholder="搜索"
        /></span>
        <span>点餐</span>
        <span>评价4.5</span>
        <span>商家</span>
      </section>
    </header>
    <nav>
      <section class="card">
        <span>商家配送{{ shopinfo.info && shopinfo.info.deliveryTimeTip }}</span
        >&nbsp;|&nbsp;<span>距离{{ shopinfo.info.distance }}</span>
        <div class="money">￥7 🥇 无门槛&emsp;:&emsp;领取</div>
        <p>津贴2元</p>
        <section class="tell">公告：{{ shopinfo.info.bulletin }}</section>
      </section>
    </nav>
    <main>
      <div class="left">
        <div
          @click="left_red(index)"
          class="cate"
          v-for="(item, index) in shopinfo.taglist"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="right">
        <div
          class="good"
          v-for="(item, index) in shopinfo.taglist &&
          shopinfo.taglist[currentIndex].goodlist"
          :key="index"
        >
          <div class="img-box">
            <img :src="item.picture" alt="" />
          </div>
          <div class="text">
            <p class="name2">{{ item.name }}</p>
            <p class="unit">{{ item.unit }}</p>
            <p class="sale">{{ item.month_saled_content }}好评率100%</p>
            <span class="price">￥{{ item.min_price }}</span>
            <div class="btn" @click="addGoods(currentIndex, index)">+</div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="image">
        <van-cell is-link @click="showPopup">
          <!-- 展示弹出层 -->
          <img src="../assets/OIP-C1.jpg" alt="" />
        </van-cell>
        <van-popup
          v-model="show"
          round
          position="bottom"
          :style="{ height: '60%' }"
        >
          <div class="content">
            <div class="head">
              <span>已选商品</span>
              <span @click="clear"> <van-icon name="delete-o" />清空 </span>
            </div>
            <div class="mainer">
              <section>
                <van-swipe-cell
                  v-for="(item, index) in goodcartlist"
                  :key="index"
                >
                  <van-card
                    :price="item.min_price"
                    :desc="item.month_saled_content"
                    :title="item.name"
                    class="goods-card"
                    :thumb="item.picture"
                  >
                  </van-card>
                  <template>
                    <!-- 加减器 -->
                    <van-stepper
                      v-model="value"
                      theme="round"
                      button-size="22"
                      disable-input
                    />
                  </template>
                  <template #right>
                    <van-button
                      square
                      text="删除"
                      type="danger"
                      class="delete-button"
                    />
                  </template>
                </van-swipe-cell>
              </section>
            </div>
          </div>
        </van-popup>
      </div>
      <div class="tes">
        未选购商品
        <br />
        <span style="font-size: 12px"> 还需要配送费 </span>
      </div>
      <div>
        <van-button type="primary" @click="gosubmit">主要按钮</van-button>
      </div>
    </footer>
  </div>
</template>

<script>
import {
  shop_shopinfo,
  shop_fav,
  shop_unfav,
  shopcart_add,
  shopcart_list,
  shop_favlist
} from "../api/index2";

import { Toast } from "vant";
export default {
  name: "Sort",
  data() {
    return {
      value: "",
      shopinfo: {},
      currentIndex: 0,
      activeColor: false,
      detailToOrder: {},
      orderList: [],
      goodcartlist: [],
      show: false,
      value: "1",
    };
  },
  created() {
    console.log("this.$route.query.id: ", this.$route.query.id);
    shop_shopinfo({ id: this.$route.query.id }).then((res) => {
      if (res.data.code == 200) {
        this.shopinfo = res.data.shopinfo;
        this.detailToOrder.persons = this.shopinfo.info;
      } else {
        Toast("商家不存在");
        this.$router.back();
      }
    });
    //判断店铺是否被收藏 ===============
    shop_favlist({userid:localStorage.getItem("userid")}).then((res)=>{
      res.data.list.some((item)=>{
        if(item.mtWmPoiId==this.$route.query.id){
        this.activeColor = true
      }
      else{
        this.activeColor = false
      }
      })
      
    })

  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    like() {
      if (!this.activeColor) {
        //  收藏接口
        shop_fav({
          userid: localStorage.getItem("userid"),
          shopid: this.$route.query.id,
        }).then((res) => {
          if (res.data.code == 200) {
          }
        });
        this.activeColor = true;
        this.$toast({
          message: "已收藏",
          icon: "passed",
        });
      } else if (this.activeColor) {
        // 取消收藏接口
        shop_unfav({
          userid: localStorage.getItem("userid") / 1,
          shopid: this.$route.query.id,
        }).then((unres) => {
          if (unres.data.code == 200) {
            console.log(unres.data.list);
            this.activeColor = !this.activeColor;
            this.$toast({
              message: "已取消收藏",
              icon: "passed",
            });
          }
        });
      }
    },
    left_red(index) {
      this.currentIndex = index;
    },
    //购物车数量加1  userid 用户id 必须传 ; goodid 商品id 必须传
    addGoods(currentIndex, index) {
      // 正规的都是发送请求，添加购物车  这里可能你要携带两个参数，一个是店铺的id一共产品的id 后端会动态的更改数据库
      let num = this.shopinfo.taglist[currentIndex].goodlist[index].id;//商品id
      shopcart_add({
        userid: localStorage.getItem("userid"),
        goodid: num,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast("添加成功");
          this.getCar();
          console.log(res.data);
          //弹出框的内容
          let tit = this.shopinfo.taglist[currentIndex].goodlist[index];
          let goods = this.goodcartlist.find((item) => item.id == tit.id);
          if (goods == undefined) {
            this.goodcartlist.push(tit);
          } else {
            // 此处可以更改货物的数量，这是购物车中有此产品的情况
            console.log("合适");
          }
          // 利用id过滤获取到点击的这个商品，把他push进去，如果是同一件商品，就只需要更改器数量，严格电商数据都是后台处理的，
          // 提交订单的时候，直接把detailToOrder传递给订单也，订单页在有一个数组去接收，循环遍历此数组，路由传参传递，项目大一点用的是vuex
          // let arr =data.filter(item =>item.id !=ele.dataset.id)
          /*    let newArr = this.shopinfo.filter(item => item.id == userid)
          if(newArr){
            this.orderList.push()
          } */
          let nums = this.shopinfo.filter(item=>item.id == num)
         
          this.detailToOrder.push(nums)
         console.log(this.shopinfo.info);
        }
      });
    },
    gosubmit(){
           this.$router.push({
            path:"/Index/Order",
            query:{
              "detailToOrder": this.detailToOrder
            }
          }) 
          console.log('detailToOrder',detailToOrder);
    },
    getCar() {
      shopcart_list({ userid: localStorage.getItem("userid") }).then((res) => {
        console.log("rescar: ", res);
      });
    },
    showPopup() {
      this.show = true;
    },
    clear() {
      this.goodcartlist = [];
    },
  },
  
};
</script>

<style lang="css" scoped>
.sort {
  background-color: #f5f5f5;
  height: 100%;
}
.van-icon {
  margin-left: 100px;
}
header {
  background-size: cover;
}
.shop-head {
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 70px 20px 20px;
  font-size: 40px;
  justify-content: space-between;
}
.shop-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.shop-head .name1 {
  color: white;
  font-size: 26px;
}
main {
  display: flex;
  flex: 1;
  overflow: hidden;
}
main .left {
  width: 100px;
  line-height: 40px;
  padding-left: 20px;
}
main .left .cate {
  font-size: 12px;
  line-height: 40px;
}
main .right .good {
  display: flex;
}
main .right .img-box {
  width: 100px;
  margin: 10px;
}
main .right .img-box img {
  width: 100%;
}
main .right .text {
  flex: 1;
  margin-top: 10px;
  position: relative;
}
main .right .name2 {
  font-weight: 700;
}
main .right .unit {
  font-size: 12px;
}
main .right .sale {
  font-size: 12px;
}
main .right .price {
  color: red;
  font-weight: 700;
}
main .right .btn {
  color: #fff;
  background-color: skyblue;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  position: absolute;
  right: 0;
  bottom: 15px;
}
.van-search {
  width: 100px;
  opacity: 0.75;
  height: 15px;
}
.menu {
  display: flex;
  padding-bottom: 50px;
}
.menu span {
  margin-right: 15px;
  color: #fff;
}
.menu span:hover {
  font-weight: 700;
  color: red;
  border-bottom: 2px solid rgb(255, 255, 255);
}
.logo {
  vertical-align: middle;
}
.card {
  width: 95%;
  background-color: #fff;
  margin: -35px auto 0;
  border-radius: 10px;
  height: 140px;
  box-sizing: border-box;
  padding: 15px;
  line-height: 30px;
}
.card p {
  color: red;
  background-color: rgb(253, 234, 234);
  width: 80px;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
}
.card .tell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: 10px;
  color: gray;
}
.money {
  background: linear-gradient(
    to right,
    rgb(228, 220, 189),
    rgb(231, 215, 153),
    rgb(254, 181, 120)
  );
  height: 30px;
  line-height: 30px;
  color: rgb(110, 54, 15);
  font-weight: 700;
  margin-bottom: 5px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
}
footer {
  height: 4.1667rem;
  background-color: #474747;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: sticky;
  bottom: 0;
}
footer .image {
  width: 4rem;
  height: 4rem;
  /* border: 1px solid red; */
  margin-left: 10px;
}
footer .image img {
  width: 100%;
}
footer .tes {
  flex: 1;
  margin: 0 10px;
  color: #b9b8b8;
}
footer .van-button {
  margin-right: 10px;
}
/* 弹出窗内容 */
footer .van-popup {
  height: 400px;
}
footer .content {
  padding: 15px;
}
footer .content .head {
  display: flex;
  justify-content: space-between;
}
footer .content .mainer {
  height: 100%;
  overflow: auto;
}
footer .goods-card {
  margin-top: 10px;
  background-color: rgb(255, 255, 255);
}

footer .delete-button {
  height: 100%;
}
footer .van-card {
  position: relative;
}
footer .van-stepper {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>